@import './variables.scss';

@mixin colorBtn($color, $hoverColor, $activeColor, $disabledColor) {
  background: $white;
  color:$color;
  font-size:12px;
  height: auto;
  line-height: auto;
  
  &.van-button--default{
    background: $white;
    color:$color;
  }
  &:hover {
    background: $white;
    color:$hoverColor;
    &:before,
    &:after {
      color:$white;
      background: transparent;
    }
  }
  &:active {
    color:$activeColor;
    background: $white;
    &:before,
    &:after {
      color:$white;
      background: transparent;
    }
  }
  &.is-disabled{
    &.el-button--default{
      background: $white;
      color:$disabledColor;
    }
    &:hover {
      background: $white;
      color:$disabledColor;
      &:before,
      &:after {
        color:$disabledColor;
        background: transparent;
      }
    }
    &:active {
      color:$disabledColor;
      background: $white;
      &:before,
      &:after {
        color:$disabledColor;
        background: transparent;
      }
    }
  }
  border: none;
}

.txt-btn {
  &.yellow-btn {
    @include colorBtn( var( --yu-yellow-color ), var( --yu-yellow-color--light ), var( --yu-yellow-color--dark ), var( --yu-yellow-color--disabled ) );
  }
  &.gray-btn {
    @include colorBtn( var( --yu-gray-color ), var( --yu-gray-color ), var( --yu-gray-color ), var( --yu-gray-color ) );
  }
}

